    <style include="cr-shared-style cr-input-style">
      :host {
        display: flex;
        user-select: none;
        --cr-search-field-clear-icon-fill: var(--google-grey-700);
        --cr-search-field-clear-icon-margin-end : -4px;
        --cr-search-field-input-border-bottom: 1px solid var(--cr-secondary-text-color);
      }

      #searchIcon {
        align-self: center;
        display: var(--cr-search-field-search-icon-display, inherit);
        height: 16px;
        padding: 4px;
        vertical-align: middle;
        width: 16px;
      }

      #searchIconInline {
        --iron-icon-fill-color: var(--cr-search-field-search-icon-fill, inherit);
        display: var(--cr-search-field-search-icon-inline-display, none);
        margin-inline-start: var(--cr-search-field-search-icon-inline-margin-start, 0);
      }

      #searchInput {
        --cr-input-background-color: transparent;
        --cr-input-border-bottom: var(--cr-search-field-input-border-bottom);
        --cr-input-border-radius: 0;
        --cr-input-error-display: none;
        --cr-input-min-height: var(--cr-search-field-input-min-height, 24px);
        --cr-input-padding-end: 0;
        --cr-input-padding-start: var(--cr-search-field-input-padding-start, 0);
        --cr-input-padding-bottom: var(--cr-search-field-input-padding-bottom, 2px);
        --cr-input-padding-top: var(--cr-search-field-input-padding-top, 2px);
        --cr-input-placeholder-color: var(--cr-search-field-placeholder-color);
        --cr-input-underline-display: var(--cr-search-field-underline-display);
        --cr-input-underline-border-radius: var(--cr-search-field-input-underline-border-radius, 0);
        --cr-input-underline-height: var(--cr-search-field-input-underline-height, 0);
        align-self: stretch;
        color: var(--cr-primary-text-color);
        display: block;
        font-size: 92.3076923%;  /* To 12px from 13px. */
        width: var(--cr-search-field-input-width, 160px);
      }

      :host([has-search-text]) #searchInput {
        --cr-input-padding-end: calc(24px +
          var(--cr-search-field-clear-icon-margin-end));
      }

      #clearSearch {
        --cr-icon-button-fill-color: var(--cr-search-field-clear-icon-fill);
        /* A 16px icon that fits on the input line. */
        --cr-icon-button-icon-size: var(--cr-search-field-clear-icon-size, 16px);
        --cr-icon-button-size: 24px;
        margin-inline-end: var(--cr-search-field-clear-icon-margin-end);
        margin-inline-start: 4px;
        position: absolute;
        right: 0;
      }

      :host-context([dir='rtl']) #clearSearch {
        left: 0;
        right: auto;
      }
    </style>
    <iron-icon id="searchIcon" icon="cr:search" part="searchIcon"></iron-icon>
    <cr-input id="searchInput" on-search="onSearchTermSearch"
        on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
        autofocus="[[autofocus]]" placeholder="[[label]]" spellcheck="false">
      <iron-icon id="searchIconInline" slot="inline-prefix" icon="cr:search"></iron-icon>
      <cr-icon-button id="clearSearch" class="icon-cancel"
          hidden$="[[!hasSearchText]]" slot="suffix" on-click="onTapClear_"
          title="[[clearLabel]]">
      </cr-icon-button>
    </cr-input>
